<template>
    <div>
        <el-row class="wathdra_record">
            <el-col :span="24" class="leave_header_title">
                <div class="leave_title">
                    <div class="leave_left">网站公告
                        &#X3000;
                        <el-button type="primary" size="small" @click="addWebNotice()">新增</el-button>
                        <el-button type="danger" size="small" @click="removeNotice()">删除</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" @selection-change="handleSelectionChange" stripe style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column type="index" label="序号" width="55"> </el-table-column>
            <el-table-column prop="title" label="标题"> </el-table-column>
            <el-table-column prop="connect" label="链接"> </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="editWebNotice(scope.row)"><i class="iconfont icon-xiugai icon_edit_style"></i> 修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="right clear">
            <el-pagination
                    @size-change="onSizeChange"
                    @current-change="onFlipOver"
                    :current-page="pagination.currentPage"
                    :page-sizes="pagination.pageSizes"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <DialogInput ref="addWebsiteNoticeDialog" :title="webDialogTitle">
            <div class="rem-dialog-con">
                <el-row>
                    <el-form :model="form" label-width="120px" size="small">
                        <el-col :span="24" class="text_left">
                            <el-form-item label="标题：">
                                <el-input type="text" v-model="form.title" placeholder="请输入标题"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" class="text_left">
                            <el-form-item label="链接：">
                                <el-input type="text" v-model="form.connect" placeholder="请输入链接"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </el-row>
            </div>
            <span slot="Remfooter" class="submit-btn">
                <el-button @click="closeDialog()" size="small" type="info" class="hpx-cancel-color dialog-button">取消</el-button>
                <el-button type="primary" size="small" class="dialog-button" v-if="webDialogTitle == '新增'" @click="confirmAddWebNotice()">新增</el-button>
                <el-button type="primary" size="small" class="dialog-button" v-if="webDialogTitle == '修改'" @click="confirmEditWebNotice()">修改</el-button>
            </span>
        </DialogInput>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import Pagination from "@/types/Pagination";
    import DialogInput from '@component/common/DialogInput.vue';
    @Component({
        extends: Pagination,
        components: {
            DialogInput
        }
    })
    export default class WebsiteNotice extends Vue {
        filterForm = {
            keyWord: ''
        }
        form = {
            title: '',
            connect: '',
            id: ''
        }
        removeId = [];
        webDialogTitle: string = '';
        tableData = []
        async getAllWebsiteNotice () {
            let params = {
                currentPage: this.pagination.currentPage,
                pageSize: this.pagination.pageSize
            }
            let res = await this.$http.post('websiteNotice/queryWebsiteNoticeList', params)
            if (res.status == 200) {
                let { items, totalNum } = res.data;
                this.tableData = items;
                this.pagination.total = totalNum;
            }
        }
        addWebNotice () {
            this.form = {
                title: '',
                connect: '',
                id: ''
            }
            this.webDialogTitle = '新增';
            this.$refs['addWebsiteNoticeDialog'].openDialog();
        }
        editWebNotice (item) {
            // this.editForm = item;
            // this.form = item;
            this.form.title = item.title;
            this.form.connect = item.connect;
            this.form.id = item.id;
            this.webDialogTitle = '修改';
            this.$refs['addWebsiteNoticeDialog'].openDialog();
        }
        removeNotice () {
            if (this.removeId.length == 0) {
                this.$alert('请选择想要删除的公告!','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            this.$confirm('是否删除已选择的公告?','提醒',{
                confirmButtonText: '继续',
                cancelButtonText: '以后再说',
                customClass: 'custom-message-box',
                center: true
            }).then(() => {
                this.confirmRemoveWebNotice()
            }).catch((err) => {
                console.log(err)
            })
        }
        // 新增请求
        async confirmAddWebNotice () {
            let postData = {
                title: this.form.title,
                connect: this.form.connect
            }
            let res = await this.$http.post('websiteNotice/createWebsiteNotice', postData)
            if (res.status == 200) {
                this.$refs['addWebsiteNoticeDialog'].closeDialog();
                this.getAllWebsiteNotice();
            }
        }
        // 修改请求
        async confirmEditWebNotice () {
            let postData = {
                id: this.form.id,
                title: this.form.title,
                connect: this.form.connect
            }
            let res = await this.$http.put('websiteNotice/updateWebsiteNotice', postData)
            if (res.status == 200) {
                this.$refs['addWebsiteNoticeDialog'].closeDialog();
                this.getAllWebsiteNotice();
            }
        }
        async confirmRemoveWebNotice () {
            let postData = this.removeId;
            let res = await this.$http.post('websiteNotice/delectWebsiteNotice', postData)
            if (res.status == 200) {
                this.getAllWebsiteNotice();
            }
        }
        handleSelectionChange (val) {
            val.forEach((i) => {
                this.removeId.push(i.id)
            })
        }
        closeDialog () {
            this.$refs['addWebsiteNoticeDialog'].closeDialog();
            // this.$refs['editWebsiteNoticeDialog'].closeDialog();
        }
        loadDataForPagination() {
            this.getAllWebsiteNotice()
        }
        mounted () {
            this.getAllWebsiteNotice()
        }
    }
</script>

<style scoped>

</style>